<!--
* @description 隐患详情
* @author zywu
* @date 2022/01/18 17:41:04
!-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    title="隐患详情"
    width="720px"
    top="10vh"
    v-if="visible"
    :visible.sync="visible"
    @close="visible=false"
    v-dialogDrag
  >
    <el-tabs type="border-card" v-model="tabName" style="margin-bottom:20px;">
      <el-tab-pane name="1">
        <span slot="label">隐患信息</span>
        <el-form v-if="dataObj" label-width="120px" class="demo-table-expand">
          <el-form-item label="责任人">
            <span>{{ dataObj.chargePersonName }}</span>
          </el-form-item>
          <el-form-item label="指派人">
            <span>{{ dataObj.managerPersonName || dataObj.createAccountName }}</span>
          </el-form-item>
          <el-form-item label="隐患位置">
            <span>{{ dataObj.addrDesc }}</span>
          </el-form-item>
          <el-form-item label="相关资产">
            <span>{{ dataObj.relateAssetsNames || '-' }}</span>
          </el-form-item>
          <el-form-item label="相关物联设备">
            <span>{{ dataObj.relateFcfNames || '-' }}</span>
          </el-form-item>
          <el-form-item label="所属消防系统">
            <span>{{ dataObj.systemName || '-' }}</span>
          </el-form-item>
          <el-form-item label="整改期限">
            <span>{{ dataObj.endTime }}</span>
          </el-form-item>
          <el-form-item label="现场图片/视频">
            <div style="display: flex;">
              <div v-for="(item, index) in dataObj.picUrls.split(',')" :key="index" style="margin: 0 4px;">
                <img
                  v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(item.split('.')[item.split('.').length - 1].toLowerCase())"
                  :src="require('@/assets/images/video/video-detail.png')"
                  @click="$imgViewer"
                  :data-imgpreview="dataObj.picUrls"
                  :data-imgpreviewindex="index"
                  width="50px"
                  height="50px"
                />
                <img
                  v-else
                  :src="item"
                  @click="$imgViewer"
                  :data-imgpreview="dataObj.picUrls"
                  :data-imgpreviewindex="index"
                  width="50px"
                  height="50px"
                  alt
                />
              </div>
            </div>
          </el-form-item>
        </el-form>
        <p v-else style="text-align: center;">暂无信息</p>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">整改记录</span>
        <el-timeline v-if="dataObj && dataObj.id">
          <template v-for="(item, index) in dataObj.details">
            <!-- 指派 -->
            <el-timeline-item
              v-if="item.type==3"
              :key="item.id"
              :timestamp="'指派时间：' + util.transNullundefinedToline(item.updateTime)"
              placement="top"
            >
              <el-card>
                <!-- <p>指派描述：{{util.transNullundefinedToline(item.detailDesc) || '无'}}</p> -->
                <p>由{{ dataObj.managerPersonName || dataObj.createAccountName }}指派{{ dataObj.chargePersonName }}为责任人</p>
              </el-card>
            </el-timeline-item>
            <template v-else-if="item.type == 1">
              <!-- 核实通过 -->
              <el-timeline-item
                v-if="dataObj.status == 2 && index == 0"
                :key="item.id"
                :timestamp="'核实时间：' + util.transNullundefinedToline(item.updateTime)"
                placement="top"
              >
                <el-card>
                  <div v-if="item.picUrls">
                    <div v-for="(obj, i) in item.picUrls.split(',')" :key="i">
                      <img
                        v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(obj.split('.')[obj.split('.').length - 1].toLowerCase())"
                        :src="require('@/assets/images/video/video-detail.png')"
                        @click="$imgViewer"
                        :data-imgpreview="item.picUrls"
                        :data-imgpreviewindex="i"
                        width="50px"
                        height="50px"
                      />
                      <img
                        v-else
                        @click="$imgViewer"
                        :data-imgpreview="item.picUrls"
                        :data-imgpreviewindex="i"
                        class="imgContainer-edit"
                        style="margin: 10px;"
                        :src="obj||GLOBAL.defaultImg"
                        alt="隐患图片"
                        width="100px"
                        height="100px"
                      />
                    </div>
                  </div>
                  <!-- 录音 -->
                  <div v-if="item.detailVoiceUrl != ''" style="display:flex;align-items:center;">
                    <p :class="'weixinAudio_'+item.id" @click="playAudio(item.id, item.detailVoiceUrl)">
                      <audio :src="item.detailVoiceUrl" id="media" width="1" height="1" preload></audio>
                      <span id="audio_area" class="db audio_area">
                        <div class="audio_wrp db">
                          <span class="audio_play_area">
                            <i class="icon_audio_default"></i>
                            <i class="icon_audio_playing"></i>
                          </span>
                          <span id="audio_length" class="audio_length tips_global"></span>
                          <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                        </div>
                      </span>
                    </p>
                    <el-button
                      type="text"
                      @click="handleDownload(item.detailVoiceUrl,item.id)"
                      style="margin-left:10px;"
                    >下载</el-button>
                  </div>

                  <p>核实描述：{{util.transNullundefinedToline(item.detailDesc)}}</p>
                  <p>由{{ util.transNullundefinedToline(item.createAccountName) }}核实通过</p>
                </el-card>
              </el-timeline-item>
              <!-- 整改 -->
              <el-timeline-item
                v-else
                :key="item.id"
                :timestamp="'整改时间：' + util.transNullundefinedToline(item.updateTime)"
                placement="top"
              >
                <el-card>
                  <template v-if="item.isStopSystem == 1">
                    <el-tag type="warning">停用系统</el-tag>
                    <p>开始停用时间：{{util.transNullundefinedToline(item.stopStartTime)}}</p>
                    <p>结束停用时间：{{util.transNullundefinedToline(item.stopEndTime)}}</p>
                    <p>安全措施：{{util.transNullundefinedToline(item.safetyMethod)}}</p>
                  </template>
                  <el-tag v-else>不停用系统</el-tag>
                  <div v-if="item.picUrls">
                    <div v-for="(obj, i) in item.picUrls.split(',')" :key="i">
                      <img
                        v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(obj.split('.')[obj.split('.').length - 1].toLowerCase())"
                        :src="require('@/assets/images/video/video-detail.png')"
                        @click="$imgViewer"
                        :data-imgpreview="item.picUrls"
                        :data-imgpreviewindex="i"
                        width="50px"
                        height="50px"
                      />
                      <img
                        v-else
                        @click="$imgViewer"
                        :data-imgpreview="item.picUrls"
                        :data-imgpreviewindex="i"
                        class="imgContainer-edit"
                        style="margin: 10px;"
                        :src="obj||GLOBAL.defaultImg"
                        alt="隐患图片"
                        width="100px"
                        height="100px"
                      />
                    </div>
                  </div>
                  <!-- 录音 -->
                  <div v-if="item.detailVoiceUrl != ''" style="display:flex;align-items:center;">
                    <p :class="'weixinAudio_'+item.id" @click="playAudio(item.id, item.detailVoiceUrl)">
                      <audio :src="item.detailVoiceUrl" id="media" width="1" height="1" preload></audio>
                      <span id="audio_area" class="db audio_area">
                        <div class="audio_wrp db">
                          <span class="audio_play_area">
                            <i class="icon_audio_default"></i>
                            <i class="icon_audio_playing"></i>
                          </span>
                          <span id="audio_length" class="audio_length tips_global"></span>
                          <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                        </div>
                      </span>
                    </p>
                    <el-button
                      type="text"
                      @click="handleDownload(item.detailVoiceUrl,item.id)"
                      style="margin-left:10px;"
                    >下载</el-button>
                  </div>
                  <p>整改描述：{{util.transNullundefinedToline(item.detailDesc)}}</p>
                  <p>由{{util.transNullundefinedToline(item.createAccountName)}}整改</p>
                </el-card>
              </el-timeline-item>
            </template>
            <!-- 驳回 -->
            <el-timeline-item
              v-else
              :key="item.id"
              :timestamp="'驳回时间：' + util.transNullundefinedToline(item.updateTime)"
              placement="top"
            >
              <el-card>
                <div v-if="item.picUrls">
                  <div v-for="(obj, i) in item.picUrls.split(',')" :key="i">
                    <img
                      v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(obj.split('.')[obj.split('.').length - 1].toLowerCase())"
                      :src="require('@/assets/images/video/video-detail.png')"
                      @click="$imgViewer"
                      :data-imgpreview="item.picUrls"
                      :data-imgpreviewindex="i"
                      width="50px"
                      height="50px"
                    />
                    <img
                      v-else
                      @click="$imgViewer"
                      :data-imgpreview="item.picUrls"
                      :data-imgpreviewindex="i"
                      class="imgContainer-edit"
                      style="margin: 10px;"
                      :src="obj||GLOBAL.defaultImg"
                      alt="隐患图片"
                      width="100px"
                      height="100px"
                    />
                  </div>
                </div>
                <!-- 录音 -->
                <div v-if="item.detailVoiceUrl != ''" style="display:flex;align-items:center;">
                  <p :class="'weixinAudio_'+item.id" @click="playAudio(item.id, item.detailVoiceUrl)">
                    <audio :src="item.detailVoiceUrl" id="media" width="1" height="1" preload></audio>
                    <span id="audio_area" class="db audio_area">
                      <div class="audio_wrp db">
                        <span class="audio_play_area">
                          <i class="icon_audio_default"></i>
                          <i class="icon_audio_playing"></i>
                        </span>
                        <span id="audio_length" class="audio_length tips_global"></span>
                        <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                      </div>
                    </span>
                  </p>
                  <el-button
                    type="text"
                    @click="handleDownload(item.detailVoiceUrl,item.id)"
                    style="margin-left:10px;"
                  >下载</el-button>
                </div>
                <p>驳回描述：{{util.transNullundefinedToline(item.detailDesc)}}</p>
                <p>由{{util.transNullundefinedToline(item.createAccountName)}}驳回</p>
              </el-card>
            </el-timeline-item>
          </template>
          <el-timeline-item :timestamp="'创建时间：' + util.transNullundefinedToline(dataObj.createTime)" placement="top">
            <el-card>
              <p>由{{ dataObj.createAccountName }}创建</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import util from '@/utils/util'
import { getHiddenDanger } from '@/api/hiddenDangerRectification'
import { downloadAudio } from '@/utils/downloadUtil'
export default {
  components: {},

  data() {
    return {
      util,
      visible: false,
      tabName: '1',
      dataObj: '',
    }
  },

  computed: {},

  created() {},

  mounted() {},

  methods: {
    init(id = 318) {
      this.visible = true
      this.getDetail(id)
    },
    handleDownload(url, name) {
      downloadAudio(url, name)
    },
    getDetail(id) {
      getHiddenDanger({ id }).then((res) => {
        this.dataObj = res.data
      })
    },
    // 播放录音
    playAudio(id, hiddenDangerVoice) {
      let that = this
      // 停止其他的音频播放
      for (let key in that.audioList) {
        if (key != 'weixinAudio_' + id) {
          that.audioList[key].weixinAudio0.stop()
        }
      }
      if (!that.audioList['weixinAudio_' + id]) {
        if (
          hiddenDangerVoice != null &&
          hiddenDangerVoice != '' &&
          hiddenDangerVoice != undefined
        ) {
          that.audioList['weixinAudio_' + id] = $(
            '.weixinAudio_' + id
          ).weixinAudio({
            autoplay: false,
            src: hiddenDangerVoice,
          })
        } else {
          that.$message({
            type: 'warning',
            message: '暂时没有录入语音！',
          })
        }
      }
    },
  },
}
</script>
<style lang='scss'>
</style>